<template>
  <div class="service-authorization p-4">
    <!-- 搜索区域 -->
    <div class="search-area mb-4 bg-white p-4 rounded-lg shadow-md">
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="服务名称">
          <el-input v-model="searchForm.serviceName" placeholder="请输入服务名称" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <div class="i-carbon-search mr-1"></div>搜索
          </el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 服务列表 -->
    <div class="service-list bg-white p-4 rounded-lg shadow-md">
      <ArtTable :data="serviceList" :loading="loading" border stripe>
        <el-table-column prop="serviceName" label="服务名称" />
        <el-table-column prop="serviceDesc" label="服务描述" />
        <el-table-column prop="isEnabled" label="是否启用">
          <template #default="scope">
            <el-switch v-model="scope.row.isEnabled" @change="handleStatusChange(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button type="primary" link @click="handleAuth(scope.row)"> 授权 </el-button>
          </template>
        </el-table-column>
      </ArtTable>
    </div>

    <!-- 授权弹窗 -->
    <el-dialog v-model="authDialogVisible" title="服务授权" width="600px">
      <div class="auth-dialog-content">
        <div class="mb-4 flex justify-between items-center">
          <span class="text-lg font-medium">授权列表</span>
          <el-button type="primary" @click="handleAddAuth">
            <div class="i-carbon-add mr-1"></div>添加
          </el-button>
        </div>

        <ArtTable :data="authList" :loading="authLoading" border stripe>
          <el-table-column type="selection" width="55" />
          <el-table-column prop="userName" label="用户名" />
          <el-table-column prop="system" label="用户系统" />
          <el-table-column prop="whiteIp" label="白名单IP" />
          <el-table-column prop="blackIp" label="黑名单IP" />
          <el-table-column prop="authTime" label="授权时间" />
        </ArtTable>

        <div class="mt-4 flex justify-end">
          <el-button type="danger" @click="handleDeleteAuth"> 删除 </el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 新增授权弹窗 -->
    <el-dialog v-model="addAuthDialogVisible" title="新增授权" width="500px">
      <el-form ref="authFormRef" :model="authForm" :rules="authRules" label-width="100px">
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="authForm.userName" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="用户系统" prop="system">
          <el-select v-model="authForm.system" placeholder="请选择">
            <el-option label="人事" value="人事" />
            <el-option label="教务" value="教务" />
            <el-option label="科研" value="科研" />
          </el-select>
        </el-form-item>
        <el-form-item label="白名单IP" prop="whiteIp">
          <el-input v-model="authForm.whiteIp" placeholder="请输入白名单IP" />
        </el-form-item>
        <el-form-item label="黑名单IP" prop="blackIp">
          <el-input v-model="authForm.blackIp" placeholder="请输入黑名单IP" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="addAuthDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAuthForm">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import type { FormInstance } from 'element-plus'

  // 搜索表单
  const searchForm = reactive({
    serviceName: ''
  })

  // 服务列表数据
  const loading = ref(false)
  const serviceList = ref([
    {
      serviceName: '教师子类',
      serviceDesc: '教师基本信息服务',
      isEnabled: true
    },
    {
      serviceName: '学生数据子类',
      serviceDesc: '学生基本信息服务',
      isEnabled: true
    },
    {
      serviceName: '班级数据子类表',
      serviceDesc: '班级信息服务',
      isEnabled: false
    }
  ])

  // 授权列表数据
  const authDialogVisible = ref(false)
  const authLoading = ref(false)
  const authList = ref([
    {
      userName: '2',
      system: '人事',
      whiteIp: '192.168.1.1',
      blackIp: '192.168.1.2',
      authTime: '2023-06-12 15:38:08'
    }
  ])

  // 新增授权表单
  const addAuthDialogVisible = ref(false)
  const authFormRef = ref<FormInstance>()
  const authForm = reactive({
    userName: '',
    system: '',
    whiteIp: '',
    blackIp: ''
  })

  // 表单校验规则
  const authRules = {
    userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    system: [{ required: true, message: '请选择用户系统', trigger: 'change' }]
  }

  // 搜索方法
  const handleSearch = () => {
    loading.value = true
    // TODO: 实现搜索逻辑
    setTimeout(() => {
      loading.value = false
    }, 1000)
  }

  // 重置搜索
  const resetSearch = () => {
    searchForm.serviceName = ''
    handleSearch()
  }

  // 状态切换
  const handleStatusChange = (row: any) => {
    ElMessage.success(`${row.serviceName}已${row.isEnabled ? '启用' : '停用'}`)
  }

  // 打开授权弹窗
  const handleAuth = (row: any) => {
    authDialogVisible.value = true
    // TODO: 加载授权列表
  }

  // 打开新增授权弹窗
  const handleAddAuth = () => {
    addAuthDialogVisible.value = true
  }

  // 提交授权表单
  const submitAuthForm = async () => {
    if (!authFormRef.value) return
    await authFormRef.value.validate((valid) => {
      if (valid) {
        // TODO: 提交授权表单
        ElMessage.success('添加成功')
        addAuthDialogVisible.value = false
      }
    })
  }

  // 删除授权
  const handleDeleteAuth = () => {
    ElMessageBox.confirm('确认删除选中的授权记录？', '提示', {
      type: 'warning'
    }).then(() => {
      // TODO: 删除授权记录
      ElMessage.success('删除成功')
    })
  }
</script>

<style scoped lang="scss">
  .service-authorization {
    .auth-dialog-content {
      max-height: 600px;
      overflow-y: auto;
    }
  }
</style>
